<template>
  <section class="blog-details">
    <Message ref="message"/>
    <div class="container">
      <div class="row">
        <div class="col-lg-8">
          <div class="blog-one__single">
            <div class="blog-one__image">
              <img :src="news.cover" alt="">

            </div><!-- /.blog-one__image -->
            <div class="blog-one__content">
              <ul class="list-unstyled blog-one__meta">
                <li><a href="#">{{ news.admin }}</a></li>
                <li><a href="#">{{ news.publishTime }}</a></li>
                <li><a href="#">{{ news.visitNum }} 浏览</a></li>
              </ul><!-- /.list-unstyled -->
              <h3 class="blog-one__title">
                {{ news.title }}
              </h3><!-- /.blog-one__title -->
              <p class="blog-one__text rich-content" v-html="processedContent" ref="richContainer"></p>
            </div>
          </div>
        </div><!-- /.col-lg-8 -->
        <div class="col-lg-4">
          <div class="sidebar">
            <div class="sidebar__single sidebar__search">
              <form action="#" class="sidebar__search-form">
                <input type="text" v-model="keyword" name="search" placeholder="搜索...">
                <div type="submit" @click="search()"><i class="fa fa-search"></i></div>
              </form>
            </div><!-- /.sidebar__single -->
            <div class="sidebar__single sidebar__post">
              <h3 class="sidebar__title">最新要闻</h3><!-- /.sidebar__title -->
              <div class="sidebar__post-wrap">
                <div class="sidebar__post__single" v-for="item in data">
                  <div class="sidebar__post-image">
                    <div class="inner-block"><img :src="item.cover" style="width: 70px;height: 70px;border-radius: 50%"
                                                  alt="Awesome Image"></div>
                  </div><!-- /.sidebar__post-image -->
                  <div class="sidebar__post-content">
                    <h4 class="sidebar__post-title" @click="gotoDetail(item)" style="cursor: pointer"><a >{{ item.title }}</a></h4>
                    <!-- /.sidebar__post-title -->
                  </div><!-- /.sidebar__post-content -->
                </div><!-- /.sidebar__post__single -->
              </div><!-- /.sidebar__post-wrap -->
            </div><!-- /.sidebar__single -->
          </div><!-- /.sidebar -->
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->
    </div><!-- /.container -->
  </section>
</template>

<script>
import apis from '../apis/apis';
import Message from './Message.vue'

export default {
  name: "BlogDetails",
  components: {
    Message
  },
  computed: {
    processedContent() {
      // 基本安全处理（可选）
      return this.richContent
        .replace(/<img/gi, '<img loading="lazy"');
    }
  },
  mounted() {
    this.adjustImages();
  },
  updated() {
    this.adjustImages();
  },
  data() {
    return {
      news: {},
      richContent: "初始化中 ing",
      keyword: "",
      data: []
    }
  },
  methods: {
    adjustImages() {
      const container = this.$refs.richContainer;
      if (!container) return;

      container.querySelectorAll('img').forEach(img => {
        if (!img.style.width) {
          img.style.cssText += 'width:100% !important;height:auto !important;';
        }
        img.classList.add('rich-text-image');
      });
    },
    gotoDetail(item) {
      window.open('http://localhost:3000/blog-details?id='+item.id, '_self')
    },
    search(){
      if(this.keyword===""){
        this.$refs.message.message = "请输入内容"
        this.$refs.message.type = 'error'
        this.$refs.message.show()
        return
      }
      this.$router.push(`/blog?keyword=${this.keyword}`)
    },
    getData(id) {
      apis.getNewsDetail(id).then(res => {
        this.news = res.news;
        this.richContent = res.news.content;
      })
      let params = {
        'page': 1,
        'limit': 3,
        'order': 'desc'
      }
      apis.getNewsData(params).then(res => {
        this.data = res.data.list;
      })
    }
  }
}
</script>

<style scoped>
.rich-content::v-deep img.rich-text-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
